<template>
	<view class="fix-top-window">
		<view class="uni-header">
			<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
			<view class="uni-group">
				<button class="uni-button" type="primary" size="mini" @click="navigateTo('./add')">新增</button>
			</view>
		</view>
		<view class="uni-container">
			<uni-table border stripe :loading="loading" emptyText="暂无更多数据" ref="table">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">序号</uni-th>
					<uni-th align="center">图标</uni-th>
					<uni-th align="center">标题</uni-th>
					<uni-th align="center">描述</uni-th>
					<uni-th align="center">热门</uni-th>
					<uni-th align="center">首页</uni-th>
					<uni-th align="center">排序</uni-th>
					<uni-th align="center">创建时间</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in data">
					<uni-td align="center">{{ index + 1 }}</uni-td>
					<uni-td align="center">
						<image :src="item.icon.path" style="width:30px;height:30px;"></image>
					</uni-td>
					<uni-td align="center">
						<text class="titleApp">
							{{item.name}}
						</text>
					</uni-td>
					<uni-td align="center">{{item.description}}</uni-td>
					<uni-td align="center">{{item.is_hot_show==true?'是':'否'}}</uni-td>
					<uni-td align="center">{{item.is_index_show==true?'是':'否'}}</uni-td>
					<uni-td align="center">{{item.sort}}</uni-td>
					<uni-td align="center"><uni-dateformat :date="item.create_date"
							format="yyyy-mm-dd hh:mm:ss"></uni-dateformat></uni-td>
					<uni-td align="center">
						<button size="mini" type="warn" @click="navigateTo('./edit?id=' + item._id, false)"
							class="uni-update-button">修改</button>
						<button size="mini" @click="confirmDelete(item._id,index)" type="warn">删除</button>
					</uni-td>
				</uni-tr>

			</uni-table>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				loading: false
			}
		},
		onShow() {
			this.loading = true;
			const db = uniCloud.database();
			let res = db.collection('opendb-mall-categories').orderBy('sort').get().then((res) => {
				this.data = res.result.data;
				this.loading = false;
			});

		},
		methods: {

			navigateTo(url, clear) {
				// clear 表示刷新列表时是否清除页码，true 表示刷新并回到列表第 1 页，默认为 true
				uni.navigateTo({
					url
				})
			},
			confirmDelete(id, index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function(res) {
						if (res.confirm) {
							const db = uniCloud.database();
							let res = db.collection('opendb-mall-categories').doc(id).remove().then((res) => {
								that.data.splice(index, 1);
							});
						}
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-update-button[type="warn"] {
		background: #007aff;
		margin-right: 10px;
	}
</style>